<template>
  <button class="custom-button-secondary"
   @click="$emit('click')" 
   :disabled="content.includes('s')">
    {{ content }}
  </button>
</template>

<script>
export default {
  name: 'Button02',
  props: {
    content: {
      type: String,
      default: ''
    }
  }
}
</script>

<style scoped>
.custom-button-secondary {
  padding: 0 15px;
  height: 45px;
  border: 1px solid #4a90e2;
  border-radius: 12px;
  background: white;
  color: #4a90e2;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.custom-button-secondary:hover:not(:disabled) {
  background: #f5f9ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.15);
}

.custom-button-secondary:active:not(:disabled) {
  transform: translateY(0);
}

.custom-button-secondary:disabled {
  border-color: #ccc;
  color: #999;
  cursor: not-allowed;
  background: #f5f5f5;
}
</style>